<script lang="ts" setup>
import { ref } from 'vue'

// popup 的调用方法
const popup = ref<{
  open: () => void
  close: () => void
}>()
// 分别调用相应的方法导出
const popupOpen = () => {
  popup.value?.open() // 接受父组件传过来的弹出方位
}
const popupClose = () => {
  popup.value?.close()
}
// 获取父组件传值
const props = withDefaults(
  defineProps<{
    head: string
    rules?: any
  }>(),
  {
    head: '优惠券使用规则',
  },
)

/**跳转到可使用点位页面 */
const skipPage = (couponId: number) => {
  console.log(couponId)
  uni.navigateTo({
    url: `/pagesMy/availablePoint/availablePoint?couponId=${couponId}`,
  })
}

// 导出方法
defineExpose({
  popupOpen,
  popupClose,
})
</script>

<template>
  <uni-popup ref="popup" :safe-area="false" type="bottom">
    <view class="popupBox">
      <view class="head">{{ head }}</view>
      <view class="_body">
        <view v-html="props.rules?.rule"></view>
        <view
          class="skipPageText"
          v-if="props.rules?.position == 1 || props.rules?.position == 3"
          @tap="skipPage(props.rules.couponId ? props.rules.couponId : props.rules.id)"
          >点击查看可使用点位详情
        </view>
      </view>
      <button class="_button" @tap="popup?.close()">知道了</button>
    </view>
  </uni-popup>
</template>

<style lang="scss">
//
.popupBox {
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  padding-bottom: 60rpx;
}
.head {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 96rpx;
  font-size: 30rpx;
  color: #000000e5;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
}
._body {
  padding: 24rpx 48rpx 40rpx;
  font-size: 28rpx;
  color: #000000e5;
  .skipPageText {
    height: 36rpx;
    line-height: 36rpx;
    color: #8adf4b;
    font-size: 26rpx;
    text-decoration-line: underline;
  }
}
._button {
  height: 76rpx;
  line-height: 76rpx;
  margin: 14rpx 24rpx;
  font-size: 26rpx;
  color: #fff;
  border-radius: 44rpx;
  background-color: $uni-color-motif;
}
</style>
